<template>
  <div class="region-distribution-card">
    <div class="chart-header">
      <div class="chart-title">区域分布</div>
    </div>
    <div class="chart-container" ref="chartRef"></div>
    <div class="street-stats">
      <div class="street-item" v-for="(item, index) in streetItems" :key="index">
        <span class="street-name">
          <i class="color-dot" :style="{ backgroundColor: getItemColor(index) }"></i>
          {{ item.name }}
        </span>
        <span class="street-value">{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, watch, computed } from 'vue'
import * as echarts from 'echarts'

// 从父组件注入数据
const statisticsData = inject('statisticsData')
const chartRef = ref(null)
let chart = null

// 从后端数据中提取街道分布数据
const streetDistribution = computed(() => {
  if (!statisticsData.value || !statisticsData.value.streetStats) {
    return []
  }
  
  return statisticsData.value.streetStats.map(item => ({
    name: item.street_name,
    value: item.asset_count
  }))
})

// 为底部显示准备的数据
const streetItems = computed(() => {
  const defaultItems = [
    { name: '暂无数据', value: 0 }
  ]
  
  return streetDistribution.value.length > 0 ? streetDistribution.value : defaultItems
})

// 获取总资产数
const totalAssets = computed(() => {
  if (statisticsData.value && statisticsData.value.totalCount) {
    return statisticsData.value.totalCount
  }
  return 0 // 默认值
})

// 获取对应颜色
const getItemColor = (index) => {
  const colors = ['#F56C6C', '#409EFF', '#67C23A', '#E6A23C', '#9254DE', '#36CBBE']
  return colors[index % colors.length]
}

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return
  
  // 如果已存在chart实例，销毁重建
  if (chart) {
    chart.dispose()
  }
  
  // 创建ECharts实例
  chart = echarts.init(chartRef.value)

  // 使用实际数据或默认数据
  const streetData = streetDistribution.value.length > 0 ? streetDistribution.value : [
    { name: '暂无数据', value: 0 }
  ]
  
  // 配置图表选项
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: totalAssets.value.toString(),
          textAlign: 'center',
          fill: '#303133',
          fontSize: 24,
          fontWeight: 'bold'
        }
      },
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '总资产数',
          textAlign: 'center',
          fill: '#909399',
          fontSize: 14,
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          rich: {},
          width: 100,
          height: 30,
          lineHeight: 80
        }
      }
    ],
    series: [
      {
        name: '区域分布',
        type: 'pie',
        radius: ['55%', '75%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: streetData.map((item, index) => {
          // 为不同街道设置不同颜色
          const colors = ['#F56C6C', '#409EFF', '#67C23A', '#E6A23C', '#9254DE', '#36CBBE']
          return {
            value: item.value,
            name: item.name,
            itemStyle: {
              color: colors[index % colors.length]
            }
          }
        })
      }
    ]
  }
  
  // 使用配置项设置图表
  chart.setOption(option)
  
  // 窗口大小变化时自动调整图表大小
  window.addEventListener('resize', () => {
    chart && chart.resize()
  })
}

// 当统计数据变化时更新图表
watch(() => statisticsData.value, (newVal) => {
  if (newVal && newVal.streetStats) {
    // 根据实际数据更新图表
    initChart()
  }
}, { deep: true })

onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.region-distribution-card {
  height: 820px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  
  .chart-header {
    margin-bottom: 10px;
    
    .chart-title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }
  }
  
  .chart-container {
    width: 100%;
    height: 250px;
  }
  
  .street-stats {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    
    .street-item {
      width: 50%;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      
      .street-name {
        font-size: 14px;
        color: #606266;
        
        .color-dot {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 6px;
        }
      }
      
      .street-value {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }
  }
}
</style> 